<template>
  <div>
    <el-form :inline="true" style="margin-bottom: -15px" label-width="130px">
      <el-form-item style="margin-bottom: 5px">
        <el-button class="el-icon-sort" type="text" @click="convertTabsShow"></el-button>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select style="width: 120px" v-model="project" clearable placeholder="所属项目..." size="mini" @change="handleSelectProject">
          <el-option-group :key="group.label" :label="group.label" v-for="group in projectList">
            <el-option v-for="item in group.projectList" :key="item.projectId" :label="item.projectName" :value="item.projectId"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-cascader
            style="width: 170px"
            size="mini"
            v-model="moduleId"
            :key="popData.moduleKey"
            :options="popData.moduleList"
            :props="{label:'moduleName', value: 'moduleId', children: 'children'}"
            clearable
            placeholder="所属模块..."
            class="form-inputA">
            </el-cascader>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select v-model="devPerson" clearable placeholder="开发负责人..." size="mini" filterable style="width: 120px">
          <el-option v-for="item in userList[1].options" :key="item.userId" :label="item.userName" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select v-model="testPerson" clearable placeholder="测试负责人..." size="mini" filterable style="width: 120px">
          <el-option v-for="item in userList[2].options" :key="item.userId" :label="item.userName" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="testType" placeholder="类型" size="mini" clearable style="width: 80px">
          <el-option v-for="item in testTypeList" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="status" placeholder="测试状态" size="mini" clearable style="width: 150px">
          <el-option v-for="item in statusList" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" style="margin-bottom: 5px" @click="handleClickSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="noClose">不展示关闭</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="noRefuse">不展示拒绝</el-checkbox>
      </el-form-item>
      <div style="float:right; margin-top: 5px">
        <el-button type="mini" @click="handleExportExcel">导出至Excel</el-button>
        <pop-vue ref="pop" :user_id="userId"/>
        <back-view ref="back" :user_id="userId"/>
        <back-view-read ref="back2" :user_id="userId"/>
        <pop-view ref="pop2" :user_id="userId"/>
        <approval-test ref="approval" :user_id="userId"/>
        <task-pop ref="task" />
      </div>
    </el-form>
  </div>
</template>

<script>
  import PopVue from './testNewPop.vue'
  import PopView from './testViewPop.vue'
  import BackView from './backNewPop'
  import BackViewRead from './backNewPopRead'
  import TaskPop from './TaskTest'
  import ApprovalTest from './ApprovalTest'
  import {findByGroup} from '@/api/user'
  import {findProjectByGroup} from '@/api/project'
  import {findByPage, exportExcel, downLoad} from '@/api/test'
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        'window_height'
      ])
    },
    mounted() {
      this.devPerson = this.role === 'developer' ? this.userId : ''
      this.testPerson = this.role === 'tester' ? this.userId : ''
    },
    name: "SearchVue",
    props: ['userId','role'],
    components: {
      PopVue,
      TaskPop,
      PopView,
      ApprovalTest,
      BackView,
      BackViewRead
    },
    data() {
      return {
        noClose: true,
        noRefuse: true,
        height: `${document.documentElement.clientHeight}`,
        testTypeList: [
          {key: 0, value: '任务'},
          {key: 1, value: '生产'},
          {key: 2, value: '测试'},
          {key: 3, value: '回归'},
        ],
        versionList: [],
        projectList: [
          {
            label: '开发项目',
            projectList: []
          },
          {
            label: '已关闭项目',
            projectList: []
          }
        ],
        statusList: [
          { key:0, value: '新建'},
          { key:1, value: '已分配'},
          { key:2, value: '打开'},
          { key:3, value: '代码已提交'},
          { key:4, value: '待测试'},
          { key:5, value: '已关闭'},
          { key:6, value: '再次打开'},
          { key:7, value: '拒绝'},
          { key:8, value: '待自测'}
        ],
        userList: [{
          label: '组长',
          options: []
        }, {
          label: '开发',
          options: []
        }, {
          label: '测试',
          options: []
        }],
        devPerson: '',
        testPerson: '',
        project: '',
        moduleId: [],
        version: '',
        decomposition: '',
        status: '',
        testType: '',
        popData: {
          userList: [],
          vesrion: [],
          projectList: [],
          moduleKey: 1,
          moduleList: [],
          group: ''
        }
      }
    },
    methods: {
      handleExportExcel() {
        let data = {
          group: this.popData.group,
          projectId: this.project,
          devPerson: this.devPerson,
          testPerson: this.testPerson,
          lv1ModuleId: this.moduleId[0],
          lv2ModuleId: this.moduleId[1],
          status: this.status,
          noClose: this.noClose,
          noRefuse: this.noRefuse,
          type: this.testType
        }
        exportExcel(data).then(response => {
          // const fileName = response.headers['content-disposition'].match(/filename=(.*)/)[1]
          // console.log(response)
        })
      },
      convertTabsShow() {
        this.changeTableHeight(this.$parent.show)
        this.$parent.convertShow()
      },
      changeTableHeight(show) {
        // this.tableHeight = this.window_height - 107
        if (show) {
          this.$parent.$refs.tableList.tableHeight = this.window_height - 107
        } else {
          this.$parent.$refs.tableList.tableHeight = this.window_height - 169
        }
        // if (show) {
        //   this.$parent.$refs.tableList.tableHeight = this.height>900?830:520
        // } else {
        //   this.$parent.$refs.tableList.tableHeight = this.height>900?770:458
        // }
        // console.log(this.$parent.$refs.tableList.tableHeight)
      },
      handleSelectProject(id) {
        this.popData.moduleKey++
        if (this.project === '' || this.project == null) {
          this.moduleId = []
          this.popData.moduleList = []
          return
        }
        this.popData.projectList.forEach(p => {
          if (p.projectId === id) {
            this.popData.moduleList = p.modules
          }
        })
      },
      handleClickSearch() {
        let data = {
          group: this.popData.group,
          projectId: this.project,
          devPerson: this.devPerson,
          testPerson: this.testPerson,
          lv1ModuleId: this.moduleId[0],
          lv2ModuleId: this.moduleId[1],
          status: this.status,
          noClose: this.noClose,
          noRefuse: this.noRefuse,
          type: this.testType
        }
        let page = this.$parent.$refs.tableList.page
        findByPage(data, page.pageSize, page.pageNum).then(response => {
          this.$parent.$refs.tableList.getTableData(response)
        })
      },
      clickNew(groupId) {
        this.selectData(groupId)
        this.handleClickSearch()
      },
      selectData(groupId) {
        this.popData.group = groupId
        this.userList[0].options=[]
        this.userList[1].options=[]
        this.userList[2].options=[]
        findByGroup(groupId).then(response => {
          this.popData.userList = response
          for (let i=0; i<response.length; i++) {
            let element = response[i]
            if (element.role==="leader") {
              this.userList[0].options.push(element)
            }
            if (element.role==="developer") {
              this.userList[1].options.push(element)
            }
            if (element.role==="tester") {
              this.userList[2].options.push(element)
            }
          }
        });
        this.projectList[0].projectList=[]
        this.projectList[1].projectList=[]
        findProjectByGroup(groupId).then(response => {
          for (let i=0; i<response.length; i++) {
            let element = response[i]
            if (element.status===0) {
              this.projectList[0].projectList.push(element)
            } else {
              this.projectList[1].projectList.push(element)
            }
          }
          this.popData.projectList = response
        })
      },
      initStateData() {

      }
    }
  }

</script>
